$(function () {
  $.ajax({
    url: "../../interface/getitems.php",
    typeof: "",
    dataType: "json",
  })
    .then((res) => {
      let template = "";
      let temp = "";

      res.forEach((element) => {
        let pic = JSON.parse(element.picture);

        template += `<li>
          <a href="../html/item.html?id=${element.ID}">
            <img src="../${pic[0].src}" alt="" />
            <span>${element.title}</span>
            <i calss="price">${element.price}元</i>
            <b>14万人好评</b>
          </a>
          <div class="gotoshop">加入购物车</div>
        </li>`;

        temp += ` <ul class='clearfix product_li' data-id='${element.id}'>
                <li>
                    <input type="checkbox" name="check" class="check">
                </li>
                <li>
                    <img src="../${pic[0].src}" alt="">
                </li>
                <li class="type">
                ${element.title} 类型:<i>${element.type}</i>颜色:<b>${
          element.color
        }</b>
                </li>
                <li class='unit-price'>
                ${parseInt(element.price)}元
                </li>
                <li>
                    <input type='number' value='${
                      element.num
                    }' class='inp-num'>  
                </li>
                <li class='suntotal'>
                ${parseInt(element.price) * element.num}元
                </li>
                <li class='delete'>
                    x
                </li>
            </ul>`;
      });

      $(".list3").html(template);
      $(".product-info").html(temp);
    })
    .catch((xhr) => {
      console.log(xhr);
    });
});
